<template>
  <GlobalBG title="治理场景" :showBack="true" :showCollege="false">
    <view class="container">
      <!-- 顶部导航 -->
      <view class="header">
        <scroll-view class="header-tabs" scroll-x>
          <button
            v-for="(tab, index) in tabs"
            :key="index"
            :class="{ active: activeTab === tab.name }"
            @click="handleTabChange(tab)"
            class="tab-button"
          >
            {{ tab.name }}
          </button>
        </scroll-view>
      </view>

      <!-- 监测概览 -->
      <view class="overview-card">
        <view class="monitoring-locations">
          <text class="monitoring-title">监测点位</text>
          <view @click="showPicker = true" class="location-input">
            {{ selectedLocation?.name || '请选择监测点' }}
            <image class="arrow" src="/static/images/down.png" />
          </view>
        </view>

        <!-- 监测点选择弹窗 -->
        <uni-popup
          ref="pickerPopup"
          type="bottom"
          :mask-click="true"
          @maskClick="showPicker = false"
        >
          <view class="picker-content">
            <view class="picker-header">
              <text class="picker-title">选择监测点位</text>
              <text class="picker-close" @click="showPicker = false">取消</text>
            </view>
            <scroll-view class="picker-list" scroll-y>
              <view
                v-for="(location, index) in locations"
                :key="index"
                class="picker-item"
                :class="{ active: selectedLocationIndex === index }"
                @click="handleLocationSelect(index)"
              >
                <text>{{ location.name }}</text>
                <image
                  v-if="selectedLocationIndex === index"
                  class="check-icon"
                  src="/static/images/selected.png"
                />
              </view>
            </scroll-view>
          </view>
        </uni-popup>

        <view class="video-player">
          <video
            class="video"
            :src="selectedLocation.videoUrl"
            autoplay
            loop
            controls
          ></video>
        </view>
        <view class="data-indicators">
          <view class="indicator">
            <text class="value">{{ selectedLocation.status || '正常' }}</text>
            <text class="label">状态</text>
          </view>
          <view class="indicator">
            <text class="value"
              >{{ selectedLocation.monitorValue || '0.00' }}/m</text
            >
            <text class="label">监测值</text>
          </view>
          <view class="indicator">
            <text class="value"
              >{{ selectedLocation.warningThreshold || '0.00' }}/m</text
            >
            <text class="label">预警阈值</text>
          </view>
        </view>
      </view>

      <!-- 报警事件列表 -->
      <view class="events-card">
        <view class="events-header">
          <text class="events-title">报警事件</text>
          <text class="events-view-all" @click="handleViewAll">查看全部 ></text>
        </view>
        <view class="event-list">
          <view
            class="event-card"
            v-for="(event, index) in alarms"
            :key="index"
          >
            <text class="event-monitoring-point"
              >监测点：{{ event.monitoringPoint }}</text
            >
            <view class="event-row">
              <view class="event-value-row">
                <text class="event-label">当前水位/m</text>
                <text class="event-value">{{ event.currentValue }}</text>
              </view>
              <view class="event-value-row">
                <text class="event-warning-value">预警阈值/m</text>
                <text class="event-value-blue">{{
                  event.warningThreshold
                }}</text>
              </view>
            </view>
            <text class="event-time">报警时间：{{ event.time }}</text>
          </view>
        </view>
      </view>

      <!-- 数据分析 -->
      <view class="analysis-card">
        <view class="analysis-title">数据分析</view>
        <view class="chart-title">近7天事件趋势</view>
        <view class="chart-container">
          <!-- 图表组件预留位置 -->
          <qiun-data-charts
            ref="chartsRef"
            type="line"
            :opts="chartOptions"
            :chartData="analysisData"
            style="height: 100%"
          />
        </view>
      </view>
    </view>
  </GlobalBG>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, nextTick, reactive } from 'vue';
import GlobalBG from '@/components/GlobalBG.vue'; // 确保路径正确
import UniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';

// 状态变量
const tabs = ref([
  { name: '内涝防汛' },
  { name: '潮位监控' },
  { name: '防火' },
  { name: '噪音监测' },
]);
const activeTab = ref('内涝防汛');
const showPicker = ref(false);
const pickerPopup = ref<InstanceType<typeof UniPopup>>();

// 监测点数据
const locations = ref([
  {
    name: '海宇道、临开西路交口',
    videoUrl: '/static/videos/video1.mp4',
    status: '正常',
    monitorValue: '0.71',
    warningThreshold: '0.8',
  },
  {
    name: '滨海大道、东海路交口',
    videoUrl: '/static/videos/video2.mp4',
    status: '异常',
    monitorValue: '0.85',
    warningThreshold: '0.8',
  },
  {
    name: '临港工业区监测点',
    videoUrl: '/static/videos/video3.mp4',
    status: '正常',
    monitorValue: '0.78',
    warningThreshold: '0.8',
  },
  {
    name: '中心商务区监测点',
    videoUrl: '/static/videos/video4.mp4',
    status: '警告',
    monitorValue: '0.82',
    warningThreshold: '0.8',
  },
]);

const selectedLocationIndex = ref(0);
const selectedLocation = ref(locations.value[0]);

// 报警事件数据
const alarms = ref([
  {
    monitoringPoint: '海宇道、临开西路交口',
    currentValue: 0.92,
    warningThreshold: 0.8,
    time: '2025-02-22 12:32',
    isWarning: true,
  },
  {
    monitoringPoint: '滨海大道监测点',
    currentValue: 0.75,
    warningThreshold: 0.8,
    time: '2025-02-22 11:15',
    isWarning: false,
  },
]);

// 方法
const handleTabChange = (tab: { name: string }) => {
  activeTab.value = tab.name;
};

const handleLocationSelect = (index: number) => {
  selectedLocationIndex.value = index;
  selectedLocation.value = locations.value[index];
  showPicker.value = false;
};

const handleViewAll = () => {
  uni.navigateTo({ url: '/pages/index/component/ggaq/alarmEventlist' });
};

// 图表相关状态变量
const chartLoading = ref(true);
const chartsRef = ref(null); // 确保引用 qiun-data-charts 组件
const analysisData = reactive({
  categories: [],
  series: [
    {
      name: '事件数量',
      data: [],
    },
  ],
});

const chartOptions = ref({
  padding: [15, 15, 0, 15], // 增加内边距
  extra: {
    line: {
      type: 'curve', // 直线类型
    },
  },
  dataLabel: false, // 不显示数据标签
  // 标题配置（隐藏标题）
  title: {
    name: '近7天事件趋势',
    fontSize: 14,
    color: '#333',
    left: 'center',
    top: 10,
    bold: true,
    fontWeight: 'bold', // 确保标题显示粗体
  },
  //  图例配置（隐藏图例）--指的是series中的name
  legend: {
    show: false,
    position: 'top',
    float: 'center',
    padding: 5,
    margin: 5,
    fontSize: 12,
  },
  // X 轴配置
  xAxis: {
    disableGrid: false, // 禁用网格线
    boundaryGap: 'justify', // 边界间隙，均匀分布
    axisLine: true, // 是否显示轴线
    axisLineColor: '#ccc', // 轴线颜色
    axisLineStyle: 'solid', // 轴线样式
    axisLineWidth: 1, // 轴线宽度
    fontSize: 10, // 字体大小
    color: '#666', // 字体颜色
  },
  yAxis: {
    data: [
      {
        min: 0, // 最小值
        max: 6000, // 最大值
        splitNumber: 6, // 分割数量
      },
    ],
    disableGrid: false, // 禁用网格线
    gridType: 'dash', // 网格线类型，虚线
    dashLength: 4, // 虚线段长度
    gridColor: '#ebebeb', // 网格线颜色
    axisLine: true, // 是否显示轴线
    axisLineColor: '#ccc', // 轴线颜色
    axisLineStyle: 'solid', // 轴线样式
    axisLineWidth: 1, // 轴线宽度
    fontSize: 10, // 字体大小
    color: '#666', // 字体颜色
  },
});

// 确保 showPicker 的响应式变化能够正确触发 uni-popup 的显示
watch(showPicker, (value) => {
  if (value) {
    pickerPopup.value?.open();
  } else {
    pickerPopup.value?.close();
  }
});

onMounted(() => {
  console.log('onMounted 触发');

  let obj = {
    categories: ['11-16', '11-17', '11-18', '11-19', '11-20', '11-21', '11-22'],
    series: [
      {
        name: '事件数量',
        data: [1500, 2300, 3500, 4200, 4700, 5200, 5800],
      },
    ],
  };
  Object.assign(analysisData, obj);
  chartLoading.value = false;
  console.log('图表数据已设置:', analysisData.value);
});
</script>
<style lang="scss" scoped>
.container {
  padding: 24rpx;
  background-color: #f6f9ff;
}

/* 顶部导航 */
.header {
  margin-bottom: 32rpx;
  .header-tabs {
    white-space: nowrap;
    padding-bottom: 8rpx;

    .tab-button {
      height: 54rpx;
      line-height: 54rpx;
      display: inline-block;
      margin-right: 16rpx;
      padding: 0rpx 24rpx;
      border-radius: 32rpx;
      background: #fff;
      font-size: 28rpx;
      color: #666;
      border: none;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        background: #1890ff;
        color: #fff;
        font-weight: 500;
      }
    }
  }
}

/* 监测概览 */
.overview-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .monitoring-locations {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .monitoring-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
    }

    .location-input {
      display: flex;
      align-items: center;
      padding: 12rpx 20rpx;
      border-radius: 8rpx;
      font-weight: 400;
      font-size: 27rpx;
      color: #333333;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      cursor: pointer;

      .arrow {
        width: 50rpx;
        height: 50rpx;
        margin-left: 8rpx;
      }
    }
  }

  .video-player {
    margin-bottom: 24rpx;

    .video {
      width: 100%;
      height: 400rpx;
      border-radius: 12rpx;
    }
  }

  .data-indicators {
    display: flex;
    justify-content: space-between;

    .indicator {
      text-align: center;
      flex: 1;

      .value {
        display: block;
        font-size: 36rpx;
        font-weight: 500;
        color: #1890ff;
        margin-bottom: 4rpx;
      }

      .label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

/* 选择器弹窗 */
.picker-content {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 选择器弹窗头部 */
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .picker-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }

  .picker-close {
    font-size: 28rpx;
    color: #999;
  }
}

/* 选择器弹窗列表 */
.picker-list {
  max-height: 60vh;

  .picker-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 28rpx;
    padding-bottom: 28rpx;
    border-bottom: 1rpx solid #f5f5f5;
    font-size: 28rpx;
    color: #333;

    &:last-child {
      border-bottom: none;
    }

    &.active {
      color: #1890ff;
    }

    .check-icon {
      width: 36rpx;
      height: 36rpx;
      margin-left: 16rpx;
    }
  }
}

/* 报警事件 */
.events-card {
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;

  .events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .events-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
    }

    .events-view-all {
      font-size: 26rpx;
      color: #1890ff;
    }
  }

  .event-list {
    .event-card {
      height: 212rpx;
      background: #fff;
      border-radius: 15rpx;
      padding: 24rpx;
      margin-bottom: 16rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;

      &:last-child {
        margin-bottom: 0;
      }

      .event-monitoring-point {
        display: block;
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 20rpx;
      }

      .event-row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .event-value-row {
          display: flex;
          align-items: center;
          font-weight: 500;
          font-size: 23rpx;
          color: #999999;
          line-height: 33rpx;
          text-align: left;
          font-style: normal;

          .event-label {
            margin-right: 8rpx;
          }

          .event-value {
            font-weight: 600;
            font-size: 27rpx;
            color: #ff2121;
            margin-left: 30rpx;
          }

          .event-value-blue {
            font-weight: 600;
            font-size: 27rpx;
            color: #2263bf;
            margin-left: 30rpx;
          }
        }

        .event-warning-value {
          font-weight: 500;
          font-size: 23rpx;
          color: #999999;
          line-height: 33rpx;
          text-align: left;
          font-style: normal;
          color: #999;
        }
      }

      .event-time {
        display: block;
        font-size: 23rpx;
        color: #999;
        margin-top: 20rpx;
      }
    }
  }
}

/* 数据分析 */
.analysis-card {
  border-radius: 16rpx;
  padding: 24rpx;

  .analysis-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
  }
  .chart-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 23rpx;
    color: #999999;
    line-height: 33rpx;
    text-align: left;
    font-style: normal;
    margin: 20rpx 0rpx 20rpx 0rpx;
  }
  .chart-container {
    height: 500rpx;
    width: 100%;
    background: #fff;
    border-radius: 12rpx;
    overflow: hidden;
  }

  .loading {
    text-align: center;
    font-size: 28rpx;
    color: #333;
  }
}
</style>
